<template>
  <div class="q-pb-lg" :id="'radio-' + field.name">
    <div class="text-grey-7">{{field.label}}</div>
    <div>
      <q-option-group
        :options="options"
        v-model="field.value"
        inline
        size="xs"
        :disable="field.readonly"
      />
    </div>
    <div class="text-bold text-white bg-yellow-10" style="padding: 1px;" v-if="canShowCompare">
      {{field.compare.label ? field.compare.label + '：' : ''}}{{field.compare.map ? field.compare.map.value : field.compare.value}}
    </div>
    <div class="hint" v-if="field.hint">{{field.hint}}</div>
    <div v-if="field.content">
      <q-input
        outlined
        v-model="content"
        :rules="field.rules ? field.rules : null"
        :readonly="field.value !== field.contect_enable"
        autogrow
      />
    </div>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
import { mapState } from 'pinia';
import { useStore } from 'stores/store';

export default defineComponent({
  name: 'fieldRadio',
  props: {
    field: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {

    }
  },
  computed: {
    ...mapState(useStore, ['dictionary']),
    options () {
      if (this.field.dict) {
        return this.dictionary[this.field.dict];
      } else {
        return this.field.options || []
      }
    },
    canShowCompare () {
      /*
        compare的值
        compare: {
          label, // 标题
          value, // 对比的值
          always // true-有数据就显示 false-值不同，再显示
        } */
      return this.field.compare && this.field.compare.value !== null && (this.field.compare.always || this.field.compare.value != this.field.value);
    },
    content: {
      get () {
        return typeof this.field.content === 'object' ? JSON.stringify(this.field.content) : this.field.content;
      },
      set (val) {
        if (typeof this.field.content === 'object') {
          this.field.content = JSON.parse(val);
        } else {
          this.field.content = val;
        }
      }
    }
  }
});
</script>

<style scoped>
.hint {
  font-size: 12px;
  min-height: 20px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.54);
  padding: 8px 12px 0;
}
.compare {
  font-size: 12px;
  min-height: 20px;
  line-height: 1;
  padding: 8px 12px 0;
}
</style>
